<template>
	<view class="page">
		<view class="head">
			<!-- #ifdef APP-PLUS -->
			<view class="title">购物车</view>
			<!-- #endif -->
			<view class="edit" @click="isEdit = !isEdit">
				<text>{{isEdit?'完成':'编辑'}}</text>
			</view>
		</view>
		<!-- 购物车列表 -->
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
			:top="0">
			<view class="cart-list">
				<view class="list" v-for="(item, index) in goodsList" @click="onSkip('goods')" :key="index">
					<view class="check" v-if="isEdit" @click="toggleCheck(index)">
						<text class="iconfont" :class="item.isChecked ? 'icon-checked' : 'icon-check'"></text>
					</view>
					<view class="goods">
						<view class="thumb">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{ item.name }}</text>
							</view>

							<view class="price-num">
								<view class="price">
									<text class="min">￥</text>
									<text class="max">{{ item.price }}</text>
								</view>
								<view class="num">
									<view class="add" @click="decreaseQuantity(index,event)">
										<text class="iconfont icon-jian"></text>
									</view>
									<view class="number">
										<text>{{ item.is_goods }}</text>
									</view>
									<view class="add" @click="increaseQuantity(index,event)">
										<text class="iconfont icon-jia"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 结算 -->
			<view class="close-account">
				<view class="check-total">
					<!-- <view class="check" @click="toggleSelectAll">
						<text class="iconfont" :class="allSelected ? 'icon-checked' : 'icon-check'"></text>
						<text class="all">全选</text>
					</view> -->
					<view class="total">
						<text>合计：</text>
						<text class="price">￥{{ totalAmount }}</text>
					</view>
				</view>
				<view class="account">
					<view class="btn-calculate" v-if="!isEdit" @click="onConfirm">
						<text>去结算({{ selectedItemCount }})</text>
					</view>
					<view class="btn-del" v-else>
						<text class="del" @click="deleteSelectedItems">删除</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- 属性规格 -->
		<goods-attr ref="GoodsAttr"></goods-attr>
		<!-- tabbar -->

	</view>
</template>

<script>
	import {
		getCartList,
		cartCheckedById,
		delCartById
	} from '@/config/api.js';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin

		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false,
					toTop: {
						src: '',
					}
				},
				show: false,
				goodsInfo: {},
				isEdit: false,
				goodsList: [{
						id: 1,
						name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装裙子两件套 JX19301 上豆绿下米白 M ',
						price: '219.00',
						vip_price: '129.00',
						img: 'https://p3.ssl.qhimgs1.com/sdr/400__/t0485eb72d6fc28e0d9.jpg',
						attributes: ['金色', '大尺码'],
						is_goods: 0,
						isChecked: false,
					},
					{
						id: 1,
						name: '花花公子 卫衣男秋季圆领薄款休闲体恤男士时尚长袖T恤外套上衣男生情侣装套头衣服秋天男装 白色 XL',
						price: '139.00',
						vip_price: '99.00',
						attributes: ['银色', '中尺码'],
						img: 'https://p3.ssl.qhimgs1.com/sdr/400__/t0485eb72d6fc28e0d9.jpg',
						is_goods: 1,
						isChecked: false,
					},
					{
						id: 1,
						name: '戴尔(DELL)成就3681英特尔酷睿i5商用办公高性能台式机电脑整机(十代i5-10400 8G 1T 三年上门售后)21.5英寸',
						price: '3699.00',
						attributes: ['银色', '中尺码'],
						vip_price: '3600.00',
						img: 'https://p3.ssl.qhimgs1.com/sdr/400__/t0485eb72d6fc28e0d9.jpg',
						is_goods: 0,
						isChecked: false,
					},

				],
				showDetailItem: null,

			};
		},
		onShow() {
			uni.setStorageSync('oderGoodsList', '')
			// uni.setStorageSync('oderGoodsInfo', '')
			// uni.setStorageSync('goodsId', '')
		},
		onReady() {
			uni.hideTabBar()
			this.getlist();
		},
		computed: {
			allSelected() {
				return this.goodsList.every(item => item.isChecked);
			},
			selectedItemCount() {
				return this.goodsList.filter(item => item.isChecked).length;
			},
			totalAmount() {
				return this.goodsList.reduce((total, item) => {
					if (item.isChecked) {
						return total + parseFloat(item.price) * item.is_goods;
					}
					return total;
				}, 0).toFixed(2);
			}
		},
		methods: {
			onConfirm(type) {
				const idx = [];
				uni.setStorageSync('oderGoodsList', '')
				this.goodsList.forEach(ele => {
					ele.isChecked && idx.push(ele)
				});
				uni.setStorage({
					key: 'oderGoodsList',
					data: idx,
					success: function() {
						uni.navigateTo({
							url: '/moduleB/cartConfirmOrder/ConfirmOrder'
						})
					}
				});

			},
			getlist() {
				getCartList().then(res => {
					this.goodsList = res.list;
				})
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},

			// 选择sku

			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			toggleCheck(index) {
				const checked = !this.goodsList[index].isChecked;
				cartCheckedById({
					id: this.goodsList[index]['id'],
					checked: Number(checked)
				}).then(res => {
					this.goodsList[index].isChecked = checked
				})
			},
			// toggleSelectAll() {
			// 	const newState = !this.allSelected;
			// 	this.goodsList.forEach(item => {
			// 		item.isChecked = newState;
			// 	});


			// },
			increaseQuantity(index, event) {


				cartCheckedById({
					id: this.goodsList[index]['id'],
					number: this.goodsList[index].is_goods + 1
				}).then(res => {
					this.goodsList[index].is_goods += 1; // 增加数量
				})
			},
			decreaseQuantity(index, event) {
				if (this.goodsList[index].is_goods > 1) {
					// 减少数量

					cartCheckedById({
						id: this.goodsList[index]['id'],
						number: this.goodsList[index].is_goods - 1
					}).then(res => {
						this.goodsList[index].is_goods -= 1; // 增加数量
					})
				}
			},
			deleteSelectedItems() {
				// this.goodsList = this.goodsList.filter(item => !item.isChecked); // 删除所有选中的商品
				// const list = this.goodsList.find(el => el.isChecked);
				const idx = [];
				this.goodsList.forEach(ele => {
					ele.isChecked && idx.push(ele.id)
				});
				delCartById({
					id: idx.join()
				}).then(res => {
					this.getlist();
				})
				console.log(idx, '------')

			},

			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'classify':
						uni.navigateTo({
							url: '/pages/SearchGoodsList/SearchGoodsList',
						})
						break;
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails',
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			}

		}
	}
</script>

<style scoped lang="scss">
	@import 'cart.scss';
</style>